<template>
    <view class="container paddingBottomBar" v-if="OrderDetail">
        <header-bar :config="config"></header-bar>
        <view class="order-header"></view>
        <view class="order-main">
            <view class="order-title">
                <view class="order-t-l">
                    <view class="satus">{{ OrderDetail.StateName }}{{ OrderDetail.PayStatusName ?
                        `/${OrderDetail.PayStatusName}` : "" }}{{ `(${getTypeText()})` }}</view>
                    <view>{{ OrderDetail.Sn }}</view>
                </view>
            </view>
            <view class="order-item product-item">
                <view class="title-text title-text-flex" @click="goUserDetail">
                    <view>客户名称:{{ OrderDetail.StoreName ? OrderDetail.StoreName : OrderDetail.RealName }}</view>
                    <view class="title-text-right">
                        <uni-icons type="arrowright" size="20" customIcons="icon-gray-1"></uni-icons>
                    </view>
                </view>
                <view class="order-item-main" @click="goProList">
                    <view class="order-item-imgs">
                        <view class="img-item" v-for="(item, index) in showImgs" :key="index">
                            <image mode="aspectFill" :src="easyGetImgUrl(item)" class="order-item-img"></image>
                            <view class="order-item-name" v-if="itemname">{{ itemname }}</view>
                        </view>
                        <uni-icons type="more" v-if="imgs.length > 3"></uni-icons>
                    </view>
                    <view class="right-box">
                        <view class="num-box">
                            <text class="order-desc">共{{ DetailList.length }}种</text>
                        </view>
                        <uni-icons type="arrowright" size="20" customIcons="icon-black"></uni-icons>
                    </view>
                </view>
            </view>
            <view class="order-item product-item">
                <view class="title-text title-text-flex">
                    <view>付款信息</view>
                </view>
                <view class="">
                    <view class="order-price">
                        <view class="price-items">
                            <view class="price-item">
                                <text class="label">订单金额</text>
                                <text class="value">￥{{ OrderDetail.ProductPrice.toFixed(2) }}</text>
                            </view>
                            <view class="price-item">
                                <text class="label">运费</text>
                                <text class="value">+ ￥{{ OrderDetail.PostagePrice.toFixed(2) }}</text>
                            </view>
                            <view class="price-item">
                                <text class="label">应付金额</text>
                                <text class="value">￥{{ (OrderDetail.ProductPrice + OrderDetail.PostagePrice).toFixed(2)
                                    }}</text>
                            </view>
                            <view class="price-item">
                                <text class="label">优惠</text>
                                <text class="value">- ￥{{ OrderDetail.PolicyDiscount.toFixed(2) }}</text>
                            </view>
                            <view class="price-item">
                                <text class="label">优惠券</text>
                                <text class="value">- ￥{{ OrderDetail.CouponMoney.toFixed(2) }}</text>
                            </view>
                        </view>
                        <view class="pay-price">
                            <text class="pay-price-title">{{ OrderDetail.State < 2 ? "需收金额" : "实收金额" }}</text>
                                    <text class="await-pay-price-text">
                                        <text class="pay-price-text" v-if="OrderDetail.State < 2">￥{{
                                            (
                                                OrderDetail.ProductPrice +
                                                OrderDetail.PostagePrice -
                                                OrderDetail.PolicyDiscount -
                                                OrderDetail.CouponMoney
                                            ).toFixed(2)
                                        }}</text>
                                        <text class="pay-price-text" v-else>￥{{ OrderDetail.ReceiptMoney.toFixed(2)
                                            }}</text>
                                    </text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="order-item product-item">
                <view class="title-text title-text-flex">
                    <view>收货信息</view>
                </view>
                <view class="take">
                    <view class="takeuser" @click="telFn(OrderDetail.ContactTel)">
                        <text class="takeuser-name">{{ OrderDetail.ContactName }}</text>
                        <text class="takeuser-tel">{{ OrderDetail.ContactTel }}</text>
                        <text class="text-icon icon-order-tel"></text>
                    </view>
                    <view class="takeaddress">{{ OrderDetail.Address }}</view>
                </view>
            </view>
            <view class="order-item product-item product-item-line"
                @click="easyGoTo('/pages/order/order-log?orderId=' + orderId)">
                <view class="title-text title-text-flex" style="padding-bottom: 0">
                    <view>订单日志</view>
                    <view class="title-text-right">
                        <uni-icons type="arrowright" size="20" customIcons="icon-gray-1"></uni-icons>
                    </view>
                </view>
            </view>
            <view class="order-item product-item product-item-line"
                @click="easyGoTo('/pages/order/logisticsList?orderId=' + orderId)">
                <view class="title-text title-text-flex" style="padding-bottom: 0">
                    <view>发货记录</view>
                    <view class="title-text-right">
                        <uni-icons type="arrowright" size="20" customIcons="icon-gray-1"></uni-icons>
                    </view>
                </view>
            </view>
            <view v-if="infoData.OrderInvoice" class="order-item product-item product-item-line"
                @click="easyGoTo('/pages/order/billDetail?orderId=' + orderId)">
                <view class="title-text title-text-flex" style="padding-bottom: 0">
                    <view>发票记录</view>
                    <view class="title-text-right">
                        <uni-icons type="arrowright" size="20" customIcons="icon-gray-1"></uni-icons>
                    </view>
                </view>
            </view>
            <view class="order-item product-item product-item-line">
                <view class="title-text title-text-flex">
                    <view>订单备注</view>
                </view>
                <view class="remark">
                    <view class="remark-main">
                        <view class="remark-desc">{{
                            OrderDetail.CancelMessage ? OrderDetail.CancelMessage : getRemark(OrderDetail.CustomForm)
                            }}</view>
                    </view>
                </view>
            </view>
            <view class="order-item product-item">
                <view class="title-text title-text-flex">
                    <view>订单信息</view>
                </view>
                <view class="order-info">
                    <view class="order-info-item">
                        <text class="label">订单编号：</text>
                        <text class="value">{{ OrderDetail.Sn }}</text>
                    </view>
                    <view class="order-info-item" v-if="false">
                        <text class="label">订单类型：</text>
                        <text class="value">实物订货</text>
                    </view>
                    <view class="order-info-item">
                        <text class="label">支付方式：</text>
                        <text class="value">{{ OrderDetail.PayWayName }}</text>
                    </view>
                    <view class="order-info-item">
                        <text class="label">提交时间：</text>
                        <text class="value">{{ OrderDetail.AddTime }}</text>
                    </view>
                    <view class="order-info-item" v-if="OrderDetail.PayTime">
                        <text class="label">付款时间：</text>
                        <text class="value">{{ OrderDetail.PayTime }}</text>
                    </view>
                    <view class="order-info-item" v-if="OrderDetail.EndTime">
                        <text class="label">完成时间：</text>
                        <text class="value">{{ OrderDetail.EndTime }}</text>
                    </view>
                    <view class="order-info-item" v-if="OrderDetail.CancelTime">
                        <text class="label">取消时间：</text>
                        <text class="value">{{ OrderDetail.CancelTime }}</text>
                    </view>
                    <view class="order-info-item" v-if="OrderDetail.PostTypeName">
                        <text class="label">配送方式：</text>
                        <text class="value">{{ OrderDetail.PostTypeName }}</text>
                    </view>
                    <view class="order-info-item">
                        <text class="label">所属业务员：</text>
                        <text class="value">{{ OrderDetail.WorkerName }}</text>
                    </view>
                    <view class="order-info-item" v-if="deliveryImgs.length > 0">
                        <text class="label">送达图片：</text>
                        <view class="value imglist">
                            <image v-for="item in deliveryImgs" :src="item" :data-src="item" @tap="previewImage(index)"
                                mode="aspectFill"></image>
                        </view>
                    </view>
                </view>
            </view>
            <view class="order-delivery-date item-group">
                <view class="cell-item" v-if="false">
                    <text class="cell-label">交货日期</text>
                    <text>无</text>
                </view>
            </view>
            <view class="cell-item item-group" v-if="false">
                <text class="cell-label">默认发货仓库</text>
                <text class="cell-value">请选择</text>
                <uni-icons class="cell-icon" type="arrowright"></uni-icons>
            </view>

            <view class="cell-item item-group" v-if="false">
                <text class="cell-label">收款记录</text>
                <text class="cell-value">未付款</text>
                <uni-icons class="cell-icon" type="arrowright"></uni-icons>
            </view>

            <view class="cell-item item-group" v-if="false">
                <text class="cell-label">附件</text>
                <text class="cell-value">共0个</text>
                <uni-icons class="cell-icon" type="arrowright"></uni-icons>
            </view>
            <!-- v-if="isShowCancel || isShowCollection || isShowReceipt" -->
            <view class="bottom-bar">
                <button class="btn btn-nullify" v-if="isShowCancel" @click="$refs.popCancel.open()">作废</button>
                <button class="btn btn-nullify" @click="goShare">分享订单</button>
                <button class="btn btn-collection" @click="goCollection" v-if="isShowCollection">收款</button>
                <button class="btn btn-confirm-delivery" v-if="false">确认送达</button>
                <button class="btn btn-confirm-delivery" v-if="isShowReceipt" @click="goReceipt">确认收货</button>
            </view>
        </view>
        <uni-popup ref="popCancel">
            <uni-popup-dialog mode="input" placeholder="请输入作废备注" title="确认作废该订单？" v-model="remark" @close="colse"
                @confirm="confirm"></uni-popup-dialog>
        </uni-popup>
    </view>
</template>

<script>
import { mapMutations } from "vuex"
import easyProImage from "@/components/easy/easy-pro-image.vue"
import { GetOrderDetail, OrderCancel, GetOrderInfoByNumber } from "@/service/api/order.js"
import storage from "@/uni-sub-base/utils/storage.js"
export default {
    components: {
        easyProImage,
    },
    data() {
        return {
            config: {
                title: "订单详情",
                centerSlot: true,
                rightSlot: false,
                color: ["#ffffff"],
                rightBtns: [
                    {
                        id: 1,
                        type: "redo",
                    },
                ],
            },
            infoData: {},
            showImgs: [],
            imgs: [],
            itemname: "", //单个商品显示名称
            orderId: 0,
            OrderDetail: null,
            DetailList: [],
            isShowCancel: false,
            isShowCollection: false,
            isShowConfirm: false,
            isShowReceipt: false,
            remark: "",
            deliveryImgs: [],
        }
    },
    created() {
        let mainColor = this.easyGetColor("main")
        this.config.backgroundColor = [1, mainColor]
    },
    onLoad(e) {
        this.orderId = e.orderId
    },

    mounted() { },
    onShow() {
        this.getData()
    },
    methods: {
        ...mapMutations(["UP_ORDER_VIEW"]),
        goShare() {
            this.easyGoTo(
                "/pages/order/share?orderId=" +
                this.orderId
            )
        },
        getData() {
            let param = {}
            let path = "?orderId=" + this.orderId
            GetOrderDetail(param, path).then((res) => {
                if (res.State == 1) {
                    this.infoData = res.Data
                    this.OrderDetail = res.Data.OrderDetail
                    this.DetailList = this.OrderDetail.DetailList
                    this.isShowCancel =
                        this.OrderDetail.State == 0 || this.OrderDetail.State == 7 || this.OrderDetail.State == 8
                    let payMoney = this.OrderDetail.ProductPrice + this.OrderDetail.PostagePrice
                    this.isShowCollection =
                        this.OrderDetail.State == 0 ||
                        (this.OrderDetail.State == 2 && this.OrderDetail.ArrearsPrice > 0) ||
                        (this.OrderDetail.State == 10 && this.OrderDetail.ArrearsPrice > 0) ||
                        (this.OrderDetail.State == 6 && this.OrderDetail.ArrearsPrice > 0) ||
                        (this.OrderDetail.State == 15 && this.OrderDetail.ArrearsPrice > 0)

                    // let ArrearsPrice = this.OrderDetail.ArrearsPrice
                    // let PriceSum = this.OrderDetail.PriceSum

                    // let state =0 //0未付款 1已付款 2部分付款
                    // if(ArrearsPrice==0){
                    // 	state = 1
                    // }else if(ArrearsPrice<PriceSum){
                    // 	state = 2
                    // }else{

                    // }
                    let employeeTake = storage.getCache("employeeTake")
                    if (employeeTake && employeeTake == 1) {
                        this.isShowReceipt =
                            this.OrderDetail.State == 6 ||
                            (this.OrderDetail.State == 15 && this.OrderDetail.PayWay == 11)
                    } else {
                        this.isShowReceipt = false
                    }
                    this.getImageList(this.DetailList)
                    if (this.OrderDetail.State == 6 || this.OrderDetail.State == 10) {
                        // this.GetOrderImg()
                    }
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        getImageList(list) {
            let arr = []
            if (list) {
                list.forEach((e) => {
                    arr.push(e.ProductImage)
                })
            }
            if (list.length == 1) {
                this.itemname = list[0].Name
            }
            this.imgs = arr
            this.showImgs = arr.slice(0, 3)
        },
        GetOrderImg() {
            console.log(123213)
            let path = "?number=" + this.OrderDetail.Sn
            GetOrderInfoByNumber(path).then((res) => {
                if (res.State == 1) {
                    if (res.Data.completeUrl) this.deliveryImgs = res.Data.completeUrl.split(",")
                }
            })
        },
        //预览图片
        previewImage(index) {
            var current = index
            uni.previewImage({
                current: current,
                urls: this.deliveryImgs,
            })
        },
        telFn(tel) {
            uni.makePhoneCall({
                phoneNumber: tel,
            })
        },
        goUserDetail() {
            this.easyGoTo("/pages/customer/detail?StoreUserId=" + this.OrderDetail.UserId + "&StoreId=" + 0)
        },
        goProList() {
            let Str = JSON.stringify(this.DetailList);
            Str = Str.replace(/%/g, '%25'); //浏览器在对“%”执行decodeURIComponent时会报错
            this.easyGoTo(
                "/pages/order/detail-pro-list-all?totalPrice=" +
                this.OrderDetail.ProductPrice +
                "&datas=" +
                encodeURIComponent(Str),
            )
        },
        goDelivery() {
            this.easyGoTo("/pages/order/delivery-record?id=" + 0)
        },
        orderCancel(remark) {
            if (remark.trim() == "") {
                this.easyToast("请填写备注")
                return
            }
            let param = {
                orderId: this.orderId,
                remark: remark,
            }
            let path = `?orderId=${this.orderId}&remark=${remark}`
            OrderCancel(param, path).then((res) => {
                if (res.State == 1) {
                    this.getData()
                    this.upOrderView()
                    this.$forceUpdate()
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        goCollection() {
            this.easyGoTo(
                "/pages/order/collection?orderId=" +
                this.orderId +
                "&orderData=" +
                encodeURIComponent(JSON.stringify(this.OrderDetail)),
            )
        },
        colse() {
            this.$refs.popCancel.close()
        },
        confirm(e) {
            this.remark = e
            this.orderCancel(e)
        },
        getRemark(customForm) {
            if (customForm) {
                let formData = JSON.parse(customForm)
                if (formData.length > 0) {
                    let remark = formData.find((e) => {
                        return e.name == "订单留言"
                    })
                    if (remark) {
                        return remark.value
                    }
                }
            }
            return "暂无备注"
        },
        getTypeText() {
            let text = ""
            switch (this.OrderDetail.ValetType) {
                case 1:
                    text = "代下单"
                    break
                default:
                    text = "自主下单"
                    break
            }
            return text
        },
        goReceipt() {
            this.easyGoTo("/pages/order/confirm-receipt?orderId=" + this.orderId)
        },
        upOrderView() {
            this.UP_ORDER_VIEW(new Date().getTime())
        },
    },
}
</script>

<style lang="scss">
.item-group {
    background: $color-white;
    margin-bottom: $app-page-padding;
}

.state-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16rpx $app-page-padding;
    background: $color-yellow-1;

    .order-num {
        flex: 1;
    }

    .order-state {
        display: flex;
        flex-direction: row;

        .icon {
            margin-right: 10rpx;
        }
    }
}

.order-info {
    .see-more {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 66rpx;
        border-bottom: solid 1rpx $border;
    }

    .pro-list {
        .pro-list-item {
            display: flex;
            flex-direction: row;
            padding: $app-page-padding;
            background: $border;
            align-items: center;

            .pro-info {
                display: flex;
                flex-direction: column;

                .pro-price {
                    color: $app-color-text-tip;
                }
            }
        }
    }

    .order-price {
        display: flex;
        flex-direction: column;

        .order-price-item {
            display: flex;
            flex-direction: row;
            padding: 15rpx $app-page-padding 0;

            .label {
                flex: 1;
                color: $app-color-text-tip;
            }

            .price {
                text {
                    color: $app-color-text-tip;
                }

                .proce-unit {
                    font-size: $font-size-24;
                }

                .price-value {
                    font-size: $font-size-28;
                }
            }
        }

        .total-item {
            padding-top: $app-page-padding;
            padding-bottom: $app-page-padding;

            .label {
                flex: 1;
                color: $app-color-text-main;
                font-size: $font-size-30;
                font-weight: 700;
            }

            .price {
                text {
                    color: $color-red;
                }
            }
        }
    }
}

.cell-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 $app-page-padding;
    height: 90rpx;

    .cell-label {
        flex: 1;
        display: flex;
        align-items: center;
    }
}

.order-delivery-date {
    .cell-item {
        border-bottom: solid 1rpx $border;
    }

    .delivery-info {
        padding: $app-page-padding;

        .title {
            display: flex;
            margin-bottom: 16rpx;
            font-weight: 700;
        }

        .delivery-info-item {
            padding: 8rpx 0;
            display: flex;
            flex-direction: row;

            .label {
                color: $app-color-text-tip;
                flex: 1;
            }

            .user-name-text {
                margin-right: 20rpx;
            }
        }
    }
}

.bottom-bar {
    display: flex;
    justify-content: flex-end;

    .btn {
        margin: 0 0 0 24rpx;
        min-width: 192rpx;
        height: 76rpx;
        background: #ffffff;
        border-radius: 48rpx;
        border: 1rpx solid $app-color-main;
        font-size: 32rpx;
        color: $app-color-main;
    }

    .btn-nullify {
        border-color: #999999;
        color: $color-gray-2;
    }
}

.padding-item {
    padding: 14rpx 0 $app-page-padding;
}

.remark-item {
    margin-top: 20rpx;
}

.order-header {
    height: 300rpx;
    background: $app-color-main;
}

.order-main {
    margin-top: -300rpx;
    padding: 0 $app-page-padding $app-page-padding;

    .order-title {
        height: 98rpx;
        padding: $app-page-padding 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .order-t-l {
            height: 98rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .satus {
                font-weight: 700;
                font-size: $font-size-36;
                color: $color-white;
            }
        }

        .order-header-button {
            width: 158rpx;
            height: 64rpx;
            background: #ffffff;
            border-radius: 32rpx;
            text-align: center;
            line-height: 64rpx;
            color: $app-color-main;
            font-size: $font-size-28;
        }

        text {
            font-weight: 700;
            font-size: $font-size-36;
            color: $color-white;
        }

        view {
            font-size: $font-size-24;
            color: $color-white;
        }
    }

    .order-user {
        padding: $app-page-padding;
        display: flex;
        flex-direction: row;
        align-items: center;

        .location {
            width: 54rpx;
            height: 54rpx;
            border-radius: 27rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            background: $app-color-main;
            margin-right: 20rpx;
        }

        .user-info {
            display: flex;
            flex: 1;
            display: flex;
            flex-direction: column;

            text {
                color: $app-color-main;
            }

            .user-info-name {
                font-size: $font-size-30;
                font-weight: 700;
                margin-bottom: 12rpx;
            }

            .user-info-location {
                font-size: $font-size-24;
                line-height: 32rpx;
            }
        }
    }

    .order-items {
        padding: 30rpx $app-page-padding 1rpx;
    }

    .order-info {
        display: flex;
        flex-direction: column;

        .order-info-item {
            padding: 14rpx 0;
            display: flex;
            flex-direction: row;

            text {
                font-size: $font-size-24;
            }

            .label {
                color: $app-color-text-tip;
                margin-right: 10rpx;
            }

            .value {
                color: #333;
            }

            .order-info-image {
                width: 122rpx;
                height: 122rpx;
            }
        }
    }

    .order-item {
        background: $color-white;
        margin-bottom: 24rpx;
        // background: red;
    }

    .product-item {
        padding: $app-page-padding;
        border-radius: 16rpx;

        .title-text {
            display: flex;
            font-weight: 700;
            padding-bottom: 24rpx;
            border-bottom: 1rpx solid #ebebeb;
            margin-bottom: 24rpx;
            font-size: 28rpx;
        }

        .title-text-flex {
            justify-content: space-between;
            align-items: center;
        }

        .title-text-right {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        .title-text-desc {
            font-size: $font-size-24;
            color: $color-gray-2;
            padding-right: 12rpx;
            font-weight: normal;
        }
    }

    .product-item-line {
        .title-text {
            border-bottom: none;
            margin-bottom: 0rpx;
        }
    }

    .order-item-main {
        display: flex;
        flex: 1;
        flex-direction: row;
    }

    .order-item-imgs {
        display: flex;
        flex: 1;
        flex-direction: row;
        align-items: center;

        .img-item {
            position: relative;
            margin-right: 24rpx;
            display: flex;
            align-items: center;

            .order-item-name {
                flex: 1;
                font-size: 28rpx;
                color: $color-gray-1;
                display: flex;
                align-items: center;
                padding-left: 14rpx;
            }

            .order-item-img {
                display: flex;
                width: 120rpx;
                height: 120rpx;
                // border: 1px solid $app-color-main;
                border-radius: 8rpx;
            }

            .text-num {
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 40rpx;
                border-bottom-left-radius: 10rpx;
                border-bottom-right-radius: 10rpx;
                color: $color-white;
                background: rgba($color-black, 0.3);
                font-size: $font-size-24;
            }
        }
    }

    .right-box {
        display: flex;
        flex-direction: row;
        align-items: center;

        .num-box {
            display: flex;
            flex-direction: column;
            margin-right: 16rpx;

            text {
                margin-bottom: 4rpx;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }

    .order-price {
        .price-items {
            padding-bottom: 14rpx;

            .price-item {
                padding: 10rpx 0;
                display: flex;
                flex-direction: row;

                .label {
                    display: flex;
                    flex: 1;
                    font-size: 26rpx;
                    color: $color-gray-1;
                }

                .value {
                    font-size: 26rpx;
                    color: $color-gray-1;
                    font-weight: bold;
                }
            }
        }
    }

    .pay-price {
        border-top: 1rpx solid #ebebeb;
        padding: 28rpx 0rpx 4rpx 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .pay-price-title {
        font-size: 26rpx;
        color: #333333;
    }

    .await-pay-price-text {
        padding-left: 24rpx;

        text {
            color: $app-color-main;
            font-size: 32rpx;
            font-weight: bold;
        }
    }

    .takeuser {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 56rpx;
        line-height: 56rpx;
        margin-bottom: 10rpx;

        .takeuser-name,
        .takeuser-tel {
            font-size: 26rpx;
            color: $color-gray-1;
            margin-right: 5rpx;
        }

        .takeuser-tel {
            font-weight: bold;
            margin-right: 10rpx;
        }

        .bluetel {
            color: #4070ff;
            margin-left: 10rpx;
        }

        .icon-order-tel {
            width: 40rpx;
            height: 40rpx;
            background-image: url(@/static/icon/icon_order_tel.png);
        }
    }

    .takeaddress {
        font-size: 24rpx;
        color: $color-gray-3;
        padding-bottom: 10rpx;
    }

    .remark {
        background: #f7f7f7;

        .remark-main {
            border-bottom: 1rpx solid #ebebeb;

            .remark-time {
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: $color-gray-1;
                padding: 24rpx 24rpx 20rpx 24rpx;

                view {
                    font-size: $font-size-28;
                }

                text {
                    font-size: $font-size-24;
                    color: $color-gray-3;
                }
            }

            .remark-desc {
                color: $color-gray-1;
                font-size: $font-size-24;
                padding: 24rpx 24rpx 20rpx 24rpx;
                word-break: break-all;
                min-height: 80rpx;
            }
        }

        & .remark-main:last-child {
            border: none;
        }
    }
}

.imglist {
    display: flex;
    flex-wrap: wrap;

    image {
        width: 140rpx;
        height: 140rpx;
        margin: 0rpx 10rpx 10rpx 0rpx;
    }
}
</style>
